<template>
  <div class="message-board">
    <!-- 顶部导航栏 -->
    <header class="header">
      <img src="../assets/返回.svg" alt="返回" class="back-image" style="width: 40px; height: 40px;" @click="handleBack">
      <h1 class="title">家庭留言板</h1>
      <div class="filter-group">
        <button class="filter-btn">
          <i class="fas fa-filter"></i>
          <span>筛选</span>
        </button>
        <button class="category-btn">
          <i class="fas fa-tags"></i>
          <span>分类</span>
        </button>
      </div>
    </header>

    <!-- 留言列表区域 -->
    <main class="message-list">
      <div v-for="(message, index) in messages" :key="index" class="message-card"
        :class="{ 'priority-high': message.priority === 'high', 'priority-medium': message.priority === 'medium' }"
        @click="toggleExpand(index)">
        <div class="message-header">
          <div class="user-info">
            <div class="avatar" :style="{ backgroundColor: message.user.color }">
              {{ message.user.name.charAt(0) }}
            </div>
            <div class="user-details">
              <span class="user-name">{{ message.user.name }}</span>
              <span class="message-time">{{ formatTime(message.time) }}</span>
            </div>
          </div>
          <div class="priority-indicator" :class="`priority-${message.priority}`"></div>
        </div>

        <div class="message-content" :class="{ expanded: message.expanded }">
          <p>{{ message.content }}</p>
        </div>

        <div class="message-footer">
          <div class="tag" :style="{ backgroundColor: message.tag.color }">
            {{ message.tag.name }}
          </div>
          <div class="actions">
            <button class="action-btn" @click.stop="remindMessage(index)">
              <i class="fas fa-bell"></i>
            </button>
            <button class="action-btn" @click.stop="editMessage(index)">
              <i class="fas fa-edit"></i>
            </button>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部输入区域 -->
    <footer class="input-area">
      <button class="voice-btn" @click="toggleVoiceInput">
        <i class="fas fa-microphone" :class="{ recording: isRecording }"><img src="../assets/icons/语音.svg"
            style="width: 30px;height: 30px;" alt=""></i>
      </button>

      <div class="input-container">
        <input v-model="newMessage" type="text" placeholder="输入留言内容..." class="message-input"
          @keyup.enter="sendMessage" />
        <div v-if="isRecording" class="voice-wave">
          <span class="wave-dot"></span>
          <span class="wave-dot"></span>
          <span class="wave-dot"></span>
        </div>
      </div>

      <div class="quick-actions">
        <div class="priority-selector">
          <button class="priority-option" :class="{ active: selectedPriority === 'low' }"
            @click="selectedPriority = 'low'">
            <span class="priority-dot priority-low"></span>
          </button>
          <button class="priority-option" :class="{ active: selectedPriority === 'medium' }"
            @click="selectedPriority = 'medium'">
            <span class="priority-dot priority-medium"></span>
          </button>
          <button class="priority-option" :class="{ active: selectedPriority === 'high' }"
            @click="selectedPriority = 'high'">
            <span class="priority-dot priority-high"></span>
          </button>
        </div>

        <div class="tag-selector">
          <button v-for="(tag, index) in tags" :key="index" class="tag-option" :style="{ backgroundColor: tag.color }"
            @click="selectedTag = tag">
            {{ tag.name }}
          </button>
        </div>

        <button class="send-btn" @click="sendMessage">
          <i class="fas fa-paper-plane"><img src="../assets/icons/纸飞机.svg" style="width: 30px;height: 30px;" alt=""></i>
        </button>
      </div>
    </footer>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const handleBack = () => {
  router.push({ name: 'Home' });
};
interface User {
  name: string;
  color: string;
}

interface Tag {
  name: string;
  color: string;
}

interface Message {
  user: User;
  content: string;
  time: Date;
  priority: 'low' | 'medium' | 'high';
  tag: Tag;
  expanded: boolean;
}

const users: User[] = [
  { name: '张伟', color: '#4A90E2' },
  { name: '李娜', color: '#E94F64' },
  { name: '王芳', color: '#58C9B9' },
  { name: '刘强', color: '#F5A623' }
];

const tags: Tag[] = [
  { name: '日常', color: '#D8E6FF' },
  { name: '购物', color: '#FFE8D8' },
  { name: '提醒', color: '#E8FFD8' },
  { name: '重要', color: '#FFD8E8' }
];

const messages = ref<Message[]>([
  {
    user: users[0],
    content: '记得今晚7点去接孩子放学，学校门口等。',
    time: new Date(Date.now() - 3600000),
    priority: 'high',
    tag: tags[2],
    expanded: false
  },
  {
    user: users[1],
    content: '牛奶和鸡蛋快用完了，明天去超市记得买一些。',
    time: new Date(Date.now() - 86400000),
    priority: 'medium',
    tag: tags[1],
    expanded: false
  },
  {
    user: users[2],
    content: '周末家庭聚会，我已经订好了餐厅，晚上6点。',
    time: new Date(Date.now() - 172800000),
    priority: 'low',
    tag: tags[0],
    expanded: false
  },
  {
    user: users[3],
    content: '物业费这个月要交了，我已经把账单放在茶几上了。',
    time: new Date(Date.now() - 259200000),
    priority: 'medium',
    tag: tags[3],
    expanded: false
  }
]);

const newMessage = ref('');
const isRecording = ref(false);
const selectedPriority = ref<'low' | 'medium' | 'high'>('low');
const selectedTag = ref<Tag>(tags[0]);

const formatTime = (date: Date) => {
  const now = new Date();
  const diff = now.getTime() - date.getTime();

  if (diff < 60000) return '刚刚';
  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`;
  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`;
  return `${Math.floor(diff / 86400000)}天前`;
};

const toggleExpand = (index: number) => {
  messages.value[index].expanded = !messages.value[index].expanded;
};

const toggleVoiceInput = () => {
  isRecording.value = !isRecording.value;
  if (isRecording.value) {
    // 模拟语音输入
    setTimeout(() => {
      newMessage.value = '这是语音输入的测试内容';
      isRecording.value = false;
    }, 2000);
  }
};

const sendMessage = () => {
  if (!newMessage.value.trim()) return;

  const randomUser = users[Math.floor(Math.random() * users.length)];

  messages.value.unshift({
    user: randomUser,
    content: newMessage.value,
    time: new Date(),
    priority: selectedPriority.value,
    tag: selectedTag.value,
    expanded: false
  });

  newMessage.value = '';
};

const remindMessage = (index: number) => {
  alert(`已设置提醒: ${messages.value[index].content}`);
};

const editMessage = (index: number) => {
  const newContent = prompt('编辑留言:', messages.value[index].content);
  if (newContent) {
    messages.value[index].content = newContent;
  }
};
</script>

<style scoped>
@import '../assets/css/HomeMessage.css'
</style>
